import React, { useState } from 'react'
import { withRouter } from 'umi'
import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import mss from './index.module.css'

export default withRouter((props) => {
  const tabs = [
    {
      key: 'home',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: 'news',
      title: '消息',
      icon: (active) =>
        active ? <MessageFill /> : <MessageOutline />,
      badge: '99+',
    },
    {
      key: 'my',
      title: '我的',
      icon: <UserOutline />,
    },
  ]

  const [activeKey, setActiveKey] = useState('todo')

  const navigateTo = (path) => {
    const {history} = props
    history.push(`/${path}`)
  }

  return (
    <>
      <TabBar onChange={(path) => {navigateTo(path)}} className={mss.tabBar}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </>
  )
})